<template>
  <div class="home" :style="backgroundStyle">
    <div class="content">
      <div class="userInfo">
        <div class="user">
          <img :src="require('@/images/' + role + '_tx_@' + drp + 'x.png')" alt="" srcset="">
          <div class="other-info">
            <div class="name">{{ sjh }}<van-tag plain type="warning" style="margin-left: 12px;">{{ deptName }}</van-tag></div>
            <!-- <div class="tel">{{ sjh }}</div> -->
          </div>
        </div>
        <van-button type="default" round size="mini" @click="goOut">退出登录</van-button>
      </div>
      <van-divider dashed style="width: 90%;margin: 0 auto;" />
      <div class="middel-wyf">
        <div class="title">{{ fyInfo.placeInfo ? fyInfo.placeInfo.placeName : '全民认证网约房'}}</div>
        <ul class="wyf-info">
          <li>房源名称<p>{{ fyInfo.roomName }}</p></li>
          <li>经营人姓名<p>{{ fyInfo.placeInfo ? fyInfo.placeInfo.ownerName : '/'}}</p></li>
          <li>经营人联系方式<p>{{ fyInfo.placeInfo ? fyInfo.placeInfo.phone : '/' }}</p></li>
        </ul>
      </div>
      <div class="bottom-function">
        <div class="function-item" :class="item.val" v-for="(item, index) in dealFunction" :key="index" @click="goPage(item)">
          <p class="title">{{ item.title }}</p>
          <img class="icon" :src="require('@/images/' + item.val + '_@' + drp + 'x.png')" alt="" srcset="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let drp = window.localStorage.getItem('dpr');
import { mapGetters } from 'vuex';
export default {
  name:'home',
  data() {
    return {
      fjh: window.localStorage.getItem('houseCode'),
      bgImg: 'url(' + require("@/images/bg_@" + drp + "x.png") + ')',
      travelPermission: [
        {
          title: '本店排名',
          val: 'rank',
          path: '/rank-top'
        },
        {
          title: '意见建议',
          val: 'jy',
          path: '/yjjy'
        },
        /* {
          title: '巡检记录',
          val: 'xj',
          path: '/xjjl'
        } */
      ],
      yzPermission: [
        {
          title: '意见建议',
          val: 'jy',
          path: '/yjjy'
        },
        {
          title: '安全自查',
          val: 'zc',
          path: '/zcjl'
        },
        {
          title: '巡检记录',
          val: 'xj',
          path: '/xjjl'
        }
      ],
      framePermission: [
        {
          title: '共治服务',
          val: 'gz',
          path: '/xjjl'
        },
        {
          title: '行业自治',
          val: 'zz',
          path: '/zcjl'
        },
        {
          title: '问题流转',
          val: 'wt',
          path: '/yjjy'
        }
      ],
      role: window.localStorage.getItem('role'), // window.localStorage.getItem('role')
      drp,
      fyInfo: {}, // 房源信息
      sjh: window.localStorage.getItem('sjh'),
    }
  },
  computed: {
    ...mapGetters(['deptName']),
    backgroundStyle() {
      return {
        backgroundImage: this.bgImg
      }
    },
    dealFunction() {
      let { deptName, travelPermission, framePermission, yzPermission } = this;
      if(deptName == '游客') {
        return travelPermission
      } else if(deptName == '业主') {
        return yzPermission
      } else {
        return framePermission
      }
    }
  },
  mounted() {
    this.$store.dispatch('fyxx/getInfo', this.fjh).then(res => {
      this.fyInfo = res;
    })
  },
  methods: {
    goOut() {
      this.$store.dispatch('LogOut').then(() => {
        let houseCode = window.localStorage.getItem('houseCode');
        location.href = '/role?houseCode=' + houseCode;
      })
    },
    goPage(row) {
      if(row.path) {
        if(row.path == '/yjjy') {
          this.$router.push(row.path + '?id=' + this.fjh)
        } else if(row.path == '/rank-top' || row.path == '/xjjl') {
          this.$router.push(row.path + '?id=' + this.fyInfo.placeCode)
        } else {
          this.$router.push(row.path)
        }
      }
    },
    scanQrcode() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  .content {
    border-radius: 12px;
    background: linear-gradient(-179.87deg, #FFFFFF 0%, #FFFFFF00 100%);
    min-height: 644px;
    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      box-sizing: border-box;
      .user {
        display: flex;
        align-items: center;
        > img {
          width: 48px;
          height: 48px;
          margin-right: 8px;
        }
        .name {
          color: #333333;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0px;
          text-align: left;
        }
        .tel {
          color: #999999;
          font-family: PingFang SC;
          font-weight: regular;
          font-size: 14px;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
        }
      }
    }
    .middel-wyf {
      border-radius: 9px;
      background: linear-gradient(108.78deg, #5185FA 0%, #6AAAFF 100%);
      margin: 0 16px;
      box-sizing: border-box;
      padding: 16px;
      .title {
        color: #FFFFFF;
        font-family: PingFang SC;
        font-weight: medium;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
        text-align: left;
      }
      .wyf-info {
        list-style-type: disc;
        color: rgba(255, 255, 255, 0.8);
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 0px;
        text-align: left;
        display: flex;
        justify-content: space-around;
        margin-top: 8px;
        li > p {
          color: #FFFFFF;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 14px;
          line-height: 22px;
          letter-spacing: 0px;
        }
      }
    }
    .bottom-function {
      display: flex;
      flex-wrap: wrap;
      margin-top: 32px;
      padding: 0 16px;
      box-sizing: border-box;
      justify-content: space-between;
      .function-item {
        margin-bottom: 16px;
        cursor: pointer;
        .title {
          color: #333333;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 18px;
          line-height: 26px;
          letter-spacing: 0px;
          text-align: center;
          border-radius: 12px;
          margin: 16px;
          margin-bottom: 0;
        }
        .icon {
          width: 128px;
          height: 128px;
          margin: 0 9.75px;
        }
        &.rank {
          background: linear-gradient(175.53deg, #FFF7E6 0%, #FFFFFF 100%);
        }
        &.jy {
          background: linear-gradient(175.53deg, #FFF1F0 0%, #FFFFFF 100%);
        }
        &.xj {
          background: linear-gradient(175.53deg, #E6F4FF 0%, #FFFFFF 100%);
        }
        &.zc {
          background: linear-gradient(175.53deg, #E6FFFB 0%, #FFFFFF 100%);
        }
        &.gz {
          background: linear-gradient(175.53deg, #FFF7E6 0%, #FFFFFF 100%);
        }
        &.zz {
          background: linear-gradient(175.53deg, #E6F4FF 0%, #FFFFFF 100%);
        }
        &.wt {
          background: linear-gradient(175.53deg, #E6FFFB 0%, #FFFFFF 100%);
        }
      }
    }
  }
}
</style>